<template>
  <el-card>
    <div>
      <p>test</p>
      <p>query: {{ $route.query }}</p>
      <p>state: {{ appStore.routeState }}</p>
      <p>JSON 内容: {{ jsonContent }}</p>
      <el-button @click="jump">jump</el-button>
      <el-button @click="jump500">500</el-button>
      <el-button @click="closeThisTag">Close This Tag</el-button>
      <el-button @click="editHtml">在线编辑HTML</el-button>
      <el-button @click="editJson">在线编辑JSON</el-button>
      <el-button @click="sm3">测试国密SM3</el-button>
    </div>
    <el-dialog v-model="contentView" title="文章内容" fullscreen>
      <tiny-edit v-model="htmlContent" />
    </el-dialog>
    <el-dialog v-model="contentJson" title="JSON内容" fullscreen>
      <JsonEditorVue
        v-model="jsonContent"
        :current-mode="'text'"
        :language="'zh-CN'"
        :mode-list="['tree', 'text']"
        style="width: 100%" />
    </el-dialog>
  </el-card>
</template>
<script>
import JsonEditorVue from 'json-editor-vue3'
import TinyEdit from '@/plugins/tiny-edit/TinyEdit.vue'
import { SM3 } from 'gm-crypto'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'

export default {
  name: 'demo3',
  components: {
    TinyEdit,
    JsonEditorVue
  },
  data() {
    return {
      htmlContent: '<html><body><p>123</p></body></html>',
      jsonContent: '',
      contentView: false,
      contentJson: false
    }
  },
  methods: {
    jump() {
      this.$api.turnToPage({
        name: 'demo3',
        query: { name: 'demo33333' },
        state: { level1: '1', level2: { level3: '3' } }
      })
    },
    jump500() {
      this.$api.redirectE500('test 500')
    },
    closeThisTag() {
      this.$api.closeThisTagImmediately()
    },
    editHtml() {
      this.contentView = true
    },
    editJson() {
      this.contentJson = true
    },
    sm3() {
      const plainText = '你好：hello world'
      const encryptedData = SM3.digest(plainText, 'utf8', 'hex')
      this.$alert(
        '待加密字符串“你好：hello world”，加密后的值：' + encryptedData,
        this.t('dialog.info') + ''
      )
    }
  },
  watch: {
    htmlContent(html) {
      console.log('watch html changed: ')
      console.log(html)
    },
    jsonContent(json) {
      console.log('watch json changed: ')
      console.log(json)
    }
  },
  setup() {
    const { t } = useI18n()
    const appStore = useAppStore()
    return { t, appStore }
  }
}
</script>
